<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="cu-list menu">
				<view class="cu-item arrow">
					<view class="content">
						<!-- <text class="cuIcon-circlefill text-grey"></text> -->
						<text class="text-grey">当前省市</text>
					</view>
					<view class="action">
						<uni-citys :city="area" @cityPicker='cityPicker'></uni-citys>
						<!-- <text class="text-grey text-sm" @tap="openAddres(0)">{{area}}</text> -->
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">对比省市</text>
					</view>
					<view class="action">
						<uni-citys :city="area" @cityPicker='otherCityPicker'></uni-citys>
						<!-- <text class="text-grey text-sm" @tap="openAddres(1)">{{areaCompare}}</text> -->
					</view>
				</view>
				
				<view class="cu-item bottom">
					<view class="content">
						<view class="cu-btn round bg-blue" @tap="goPage('/pages/tabbar/tabbar-2/socialAreaResult')">查看测算结果</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 绑定 -->
		<goReg 
			ref="goReg" 
			:contentHeight="580"
		></goReg>
	</view>
</template>

<script>
	import uniCitys from '@/components/citys-picker/uni-citys.vue';
	import goReg from "@/components/goReg";
	export default {
		components: {
			uniCitys,
			goReg,
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				areaCompare:'',
				area:'',
				areaIndex:0,
				resultData:'',
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				
			};
		},
		
		methods: {
			goPage(page){
				// let uId = uni.getStorageSync('userId');
				let uId =1
				if(uId>"0"&&uId!=undefined){
					let errMsg = '';
					if(this.areaCompare=='')errMsg = '请输入对比城市';
					if(this.area=='')errMsg = '请选择当前城市';
					if(errMsg){
						uni.showToast({
							title:errMsg,
							icon:'none',
						});
						return;
					}
					
					console.log(this.area + this.areaCompare);
					uni.setStorageSync('socialParam',{now_city:this.area,compare_city:this.areaCompare});
					uni.navigateTo({
						url: page
					})
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			openAddres(index) {
				this.areaIndex = index;
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				// this.pickerText = JSON.stringify(e);
				let labelArr = e.labelArr;
				let city = labelArr[1]=="市辖区"?labelArr[0]:labelArr[1];
				if(this.areaIndex>0){
					this.areaCompare = city;
				}
				else{
					this.area = city;
				}
				// this.area[this.areaIndex] = city;
				// console.log(e )
			},
			async getResult(){
				let param = {
					now_city:this.area[0],
					compare_city:this.area[1],
					};
					
				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				let data = await this.$http.post(
					'elseSocial', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				this.resultData = data;
				console.log(data);
				// this.modalName = 'gridModal';
			},
			cityPicker(val){
				 this.area=val.city
			},
			otherCityPicker(val){
				 this.areaCompare=val.city
			},
			
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
		background: #F6F6F6;
		
		
	}
	.cu-btn{
		height: 80rpx;
		width: 80%;
		margin: 0 10%;
		box-shadow: 0px 3px 6px #4CA5FE;
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 10px;
		background: transparent;
		margin-left: -10px;
		padding: 0;
	}
	.cu-list{
		height: 375px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 1;
		border-radius: 10px;
		margin: 20px 10px;
	}
	.page.show {
		overflow: hidden;
	}
	
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
